<template>
  <view>
    <view class="w100 pl-24 pr-24">
      <view class="w100 h-82 mb-20 rowsb rowsm fw-b">
        <view class="h100 w-234 rowsc rowsm" :style="active == 2 ? 'background-color: #F7F6FA;color:#4878FF;font-size: 30rpx;' : 'background-color: #fff;color:#888;font-size: 28rpx;'" @click="handelTitle(2)">已通过</view>
        <view class="h100 w-234 rowsc rowsm" :style="active == 1 ? 'background-color: #F7F6FA;color:#4878FF;font-size: 30rpx;' : 'background-color: #fff;color:#888;font-size: 28rpx;'" @click="handelTitle(1)">未审批</view>
        <view class="h100 w-234 rowsc rowsm" :style="active == 3 ? 'background-color: #F7F6FA;color:#4878FF;font-size: 30rpx;' : 'background-color: #fff;color:#888;font-size: 28rpx;'" @click="handelTitle(3)">已驳回</view>
      </view>
      
      
      
      <view class="w100 h-100 bgff pl-24 pr-24">
        <scroll-view scroll-x="true" style="white-space: nowrap;" class="w100 h100">
          <view class="rows rowsm h100">
            <view class="pl-20 pr-20 h-52 rowsc rowsm br-26 fs-26 mr-20" style="" v-for="(item,index) in tab2"
              :key="index"
              :style="active2 == tab2[index].value ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'"
              @click="handelTab(index)">{{item.name}}</view>
          </view>
        </scroll-view>
      </view>

      <view class="w100 h-154 br-10 mb-20 rowscl pl-30 pr-30" style="background-color: #F7F6FA;" v-for="(item,index) in list" :key="index" 
      @click="$tools.goNext(`/pagesCopy/myWork/workDetail?id=${item.id}&index=${active2}&ldType=${item.ldType || ''}`)">
        <view class="w100 rowsb rowsm mb-14">
          <view class="fs-28 col333 fw-b" v-if="active2 == 0">{{item.name}}</view>
          <view class="fs-28 col333 fw-b" v-else>{{item.name ? item.name : tab2[tab2.findIndex(i => i.value == active2)].name}}</view>
          <view class="pl-20 pr-20 h-50 br-25 rowsc rowsm fs-24" style="border: 2rpx solid #4878FF;color: #4878FF;" v-if="item.status == 2 && active2 != -1">{{item.markNumber && active2 != 0 ? item.markNumber : item.dfCount && active2 == 0 ? item.dfCount + '积分' : '已通过'}}</view>
          <view class="pl-20 pr-20 h-50 br-25 rowsc rowsm fs-24" style="border: 2rpx solid #4878FF;color: #4878FF;" v-if="item.status == 2 && active2 == -1">{{item.markNumber && item.ldType != 1 ? item.markNumber : item.dfCount && item.ldType == 1 ? item.dfCount + '积分' : '已通过'}}</view>
          
          
          
          <view class="pl-20 pr-20 h-50 br-25 rowsc rowsm fs-24" style="border: 2rpx solid #FF9934;color: #FF9934;" v-if="item.status == 1">未审批</view>
          
          
          
          <view class="pl-20 pr-20 h-50 br-25 rowsc rowsm fs-24" style="border: 2rpx solid #FF6560;color: #FF6560;" v-if="item.status == 3 && active2 != -1">{{item.markNumber && active2 != 0 ? item.markNumber : '已驳回'}}</view>
          <view class="pl-20 pr-20 h-50 br-25 rowsc rowsm fs-24" style="border: 2rpx solid #FF6560;color: #FF6560;" v-if="item.status == 3 && active2 == -1">{{item.markNumber && item.ldType != 1 ? item.markNumber : '已驳回'}}</view>
        </view>
        <view class="w100 rowsb rowsm fs-24 col888">
          <view class="fs-24 w-500 one_overflow" style="color: #9AA2B5;" v-if="active2 != -1">
            分类: {{tab2[tab2.findIndex(i => i.value == active2)].name}} <text v-if="active2 == 0">/{{item.typeName}}</text>
          </view>
          <view class="fs-24 w-500 one_overflow" style="color: #9AA2B5;" v-else>
            分类: {{item.ldType == 1 ? '基础劳动' : item.ldType == 2 ? '公益劳动' : item.ldType == 3 ? '劳动成果' : '劳动总结'}} <text v-if="item.ldType == 1">/{{item.typeName}}</text>
          </view>
          <view class="">{{item.createTime}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        active:2,
        active2:-1,
        list:[],
        tab2: [{name:'全部',value:-1},{name:'基础劳动',value:0},{name:'社会公益劳动',value:3},{name:'劳动成果',value:2},{name:'劳动总结报告',value:1},],
        tab3: [],
        total:0,
        limit: {
          pageNum: 1,
          pageSize: 10
        },
      };
    },
    onLoad() {
      
    },
    onShow() {
      this.getList()
    },
     onReachBottom() {
      if (this.list.length < this.total) {
        this.limit.pageNum++;
        this.getList()
      }
    },
    onPullDownRefresh() {
      this.limit.pageNum = 1
      this.getList()
    },
    methods:{
      handelTab(index){
        this.limit.pageNum =1
        this.active2 = this.tab2[index].value
        this.getList()
      },
      handelTitle(val){
        this.limit.pageNum =1
        this.active = val
        this.getList()
      },
      getList() {
        if(this.active2 == -1){
          let data = {
            status: this.active,
          }
          this.$tools.axiosFromToken('POST',`proldconfig/listLdUtilsByUser?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`,{...data},'加载中').then(res => {
            if(res.code != 200) return this.$tools.showtt(res.msg)
             this.total = res.total
            if (this.limit.pageNum == 1) {
              this.list = res.rows;
            } else {
              this.list = [...this.list, ...res.rows];
            }
          })
        }
        if(this.active2 == 0){
          let data = {
            status: this.active,
          }
          this.$tools.axiosFromToken('POST', `prold/list?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`, {
            ...data
          }, '加载中').then(res => {
            if (res.code != 200) return this.$tools.showtt(res.msg)
            this.total = res.total
            if (this.limit.pageNum == 1) {
              this.list = res.rows;
            } else {
              this.list = [...this.list, ...res.rows];
            }
          })
        }else{
          if(this.active2 == 1){
            let data = {
              status: this.active,
            }
            this.$tools.axiosFromToken('POST',`proldzj/list?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`,{...data},'加载中').then(res => {
              if(res.code != 200) return this.$tools.showtt(res.msg)
               this.total = res.total
                if (this.limit.pageNum == 1) {
                  this.list = res.rows;
                } else {
                  this.list = [...this.list, ...res.rows];
                }
            })
          }
          if(this.active2 == 2){
            let data = {
              status: this.active,
            }
            this.$tools.axiosFromToken('POST',`proldcg/list?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`,{...data},'加载中').then(res => {
              if(res.code != 200) return this.$tools.showtt(res.msg)
              this.total = res.total
            if (this.limit.pageNum == 1) {
              this.list = res.rows;
            } else {
              this.list = [...this.list, ...res.rows];
            }
            })
          }
          if(this.active2 == 3){
            let data = {
              status: this.active,
            }
            this.$tools.axiosFromToken('POST',`proldgy/list?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`,{...data},'加载中').then(res => {
              if(res.code != 200) return this.$tools.showtt(res.msg)
              this.total = res.total
            if (this.limit.pageNum == 1) {
              this.list = res.rows;
            } else {
              this.list = [...this.list, ...res.rows];
            }
            })
          }
        }
      }
    }
  }
</script>

<style lang="scss">
page {
  background-color: #fff;
}
</style>
